
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: gray;
 }
 .wrapper{
    padding: 10px 0 0 8%;
    position: relative;
    #fontsize{
        font-size: 18px;
        color: black;
    }
    .list{
        background-color: #fff;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
        width: 700px;
        // border: 1px solid red;
        // height: 30px;
        .left{
            display: flex;
            align-items: center;
            #icne-size{
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }    
        } 
        .right{
                #btn-add{
                    background-color: rgb(165,208,242);
                    color: #fff;  
                    border: none;
                    width: 60px;
                    height: 26px;   
                    border-radius: 4px;               

                }
                #btn-save{
                    color: #fff;  
                    border: none;
                    width: 60px;
                    height: 26px;   
                    border-radius: 4px;  
                }
                //对话框
                .el-button--text {
                    margin-right: 15px;
                    }
                    .el-select {
                    width: 400px;
                    }
                    .el-input {
                    width: 400px;
                    }
                    .dialog-footer button:first-child {
                    margin-right: 10px;
                    }
                //对话框
            }


    }
    .juese{
        width: 1200px;
        .card{
          width: 280px;
          height: 260px;
          float: left; 
          margin-top: 20px; 
          margin-right: 30px;
          box-shadow: 2px 2px 10px ;
          .up{
            background-color: #fff;
            padding: 40px 0 0 40px;
            height: 180px;
            p{
                margin-bottom: 10px;
                #btn-ck{
                    background-color: rgb(165,208,242);
                    color: #fff;  
                    border: none;
                    width: 60px;
                    height: 26px;   
                    border-radius: 4px;
                }
            }
            .end{
                color:rgb(253,208,47) ;
            }
          }
          .down{
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div{
                width: 33.33%;
                display: flex;
                justify-content:center;
                align-items: center;

            }
                  //对话框
                  .el-button--text {
                    margin-right: 15px;
                    }
                    .el-select {
                    width: 400px;
                    }
                    .el-input {
                    width: 400px;
                    }
                    .dialog-footer button:first-child {
                    margin-right: 10px;
                    }

          }
        }
    }
    .fenye{
        position: absolute;
        left: 400px;
        top: 420px;
    }
 }
 

</style>

<template>
    <div class="wrapper">
        <!-- 平台设置 -->
        <p><span id="fontsize">平台设置/</span>平台角色管理</p>
        <!-- 角色列表 -->
        <div class="list">
            <div class="left">
                  <svg id="icne-size" t="1687174126992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3108" width="32" height="32"><path d="M774.85871 129.541355l-16.60826 0c-13.576203-38.134529-50.151213-65.520249-93.037976-65.520249L358.200148 64.021106c-42.886763 0-79.461773 27.386744-93.037976 65.520249l-16.60826 0c-66.505693 0-120.611985 53.896514-120.611985 120.120798l0 589.686337c0 66.224284 54.106292 120.120798 120.611985 120.120798l526.304797 0c66.505693 0 120.611985-53.896514 120.611985-120.120798L895.470695 249.662153C895.469672 183.437869 841.364403 129.541355 774.85871 129.541355zM358.200148 129.541355l307.011302 0c18.139126 0 32.894178 14.6957 32.894178 32.760125 0 18.065448-14.755052 32.760125-32.894178 32.760125L358.200148 195.061604c-18.139126 0-32.894178-14.6957-32.894178-32.760125C325.306994 144.236032 340.062046 129.541355 358.200148 129.541355zM829.682339 839.34849c0 30.115901-24.595164 54.600549-54.82363 54.600549L248.553912 893.949039c-30.227442 0-54.82363-24.484647-54.82363-54.600549L193.730283 249.662153c0-30.115901 24.595164-54.600549 54.82363-54.600549l16.60826 0c13.576203 38.134529 50.151213 65.520249 93.037976 65.520249l307.011302 0c42.886763 0 79.461773-27.386744 93.037976-65.520249l16.60826 0c30.227442 0 54.82363 24.484647 54.82363 54.600549L829.681316 839.34849zM314.342268 358.863251c-24.222681 0-43.858904 19.556405-43.858904 43.680848 0 24.124444 19.636223 43.680848 43.858904 43.680848s43.858904-19.556405 43.858904-43.680848C358.200148 378.419655 338.563926 358.863251 314.342268 358.863251zM314.342268 533.585621c-24.222681 0-43.858904 19.556405-43.858904 43.680848 0 24.124444 19.636223 43.680848 43.858904 43.680848s43.858904-19.556405 43.858904-43.680848C358.200148 553.142026 338.563926 533.585621 314.342268 533.585621zM709.070354 369.783974 445.917956 369.783974c-18.170848 0-32.894178 14.674211-32.894178 32.760125s14.72333 32.760125 32.894178 32.760125l263.152399 0c18.170848 0 32.894178-14.674211 32.894178-32.760125S727.241202 369.783974 709.070354 369.783974zM709.070354 544.505321 445.917956 544.505321c-18.170848 0-32.894178 14.674211-32.894178 32.760125 0 18.085914 14.72333 32.760125 32.894178 32.760125l263.152399 0c18.170848 0 32.894178-14.674211 32.894178-32.760125C741.964532 559.179532 727.241202 544.505321 709.070354 544.505321zM314.342268 708.306968c-24.222681 0-43.858904 19.556405-43.858904 43.680848 0 24.124444 19.636223 43.680848 43.858904 43.680848s43.858904-19.556405 43.858904-43.680848C358.200148 727.863373 338.563926 708.306968 314.342268 708.306968zM709.070354 719.227692 445.917956 719.227692c-18.170848 0-32.894178 14.674211-32.894178 32.760125s14.72333 32.760125 32.894178 32.760125l263.152399 0c18.170848 0 32.894178-14.674211 32.894178-32.760125S727.241202 719.227692 709.070354 719.227692z" fill="#ea9518" p-id="3109"></path></svg>
                  <span>角色列表</span>
            </div>
            <div class="right">
            
                     <!-- 对话框 -->
                     <el-button id="btn-add" @click="showAdd=true">添加角色</el-button>
                
                <el-dialog v-model="showAdd" title="添加/修改角色信息">
                    <el-form :model="addForm" class="addForm"  label-width="90" >
                        <el-form-item label="角色名称" prop="name">
                        <el-input v-model="addForm.name" placeholder="请输入角色名称" />
                        </el-form-item>
                        <el-form-item label="角色权限" prop="name">
                      <el-select v-model="addForm.permission" class="m-2" placeholder="权限">
                        <el-option
                            v-for="item in  roleListqx"
                            :key="item.id"
                            :label="item.permission"
                            :value="item.permission "
                            />
                        </el-select>
                        </el-form-item>
                        
                    
                 <!-- 用showEdit来区分是保存还是编辑 -->
                    <el-button type="primary" @click="updateRole" v-if="showEdit">修改</el-button>
                    <el-button  id="btn-save" type="primary" @click="addRole" v-else>保存</el-button>
        
                    </el-form>
           
                </el-dialog>
                   <!-- 对话框 -->


            </div>
          
        </div>
        <!-- 角色名称 -->
        <div class="juese">
            <div class="card" v-for="item in roleList " :key="item.id">
                <div class="up">
                    <p class="top">角色名称:&nbsp;{{ item.name }}</p>
                    <p class="next">权限:&nbsp;<button id="btn-ck">查看</button></p>
                    <p class="end">创建时间:&nbsp;2016-12-12</p>
                </div>
                <div class="down">
                 
                    <div class="modify" @click="toEdit(item)"><svg t="1687178007863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4238" width="32" height="32"><path d="M884.329 926.072H142.056c-23.739 0-43.051-19.488-43.051-43.443V203.228c0-23.955 19.313-43.444 43.051-43.444h370.307c17.673 0 32 14.327 32 32 0 17.673-14.326 32-32 32H163.004v638.289H863.38V497.274c0-17.673 14.327-32 32-32s32 14.327 32 32v385.355c0 23.955-19.313 43.443-43.051 43.443z" fill="#f5d394" p-id="4239"></path><path d="M334.451 783.482l37.361-197.519 393.876-466.021c9.105-10.774 22.329-17.291 36.279-17.879 13.929-0.596 27.606 4.773 37.55 14.706l70.177 70.098c18.154 18.133 19.381 47.712 2.79 67.339L516.002 723.312l-181.551 60.17z m97.115-169.071l-14.017 74.106 61.209-20.286 376.416-445.363-50.253-50.197-373.355 441.74z" fill="#f5d394" p-id="4240"></path></svg></div>
                    <div class="delect" @click="toDel(item)"><svg t="1687178176077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5696" width="32" height="32"><path d="M106.666667 213.333333h810.666666v42.666667H106.666667z" fill="#d81e06" p-id="5697"></path><path d="M640 128v42.666667h42.666667V128c0-23.573333-19.093333-42.666667-42.538667-42.666667H383.872A42.496 42.496 0 0 0 341.333333 128v42.666667h42.666667V128h256z" fill="#d81e06" p-id="5698"></path><path d="M213.333333 896V256H170.666667v639.957333C170.666667 919.552 189.653333 938.666667 213.376 938.666667h597.248C834.218667 938.666667 853.333333 919.68 853.333333 895.957333V256h-42.666666v640H213.333333z" fill="#d81e06" p-id="5699"></path><path d="M320 341.333333h42.666667v384h-42.666667zM490.666667 341.333333h42.666666v384h-42.666666zM661.333333 341.333333h42.666667v384h-42.666667z" fill="#d81e06" p-id="5700"></path></svg></div>
                    <div class="copy"><svg t="1687178225130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6776" width="32" height="32"><path d="M755 965.1H174c-42.8 0-77.7-34.8-77.7-77.7V238.9c0-42.8 34.8-77.7 77.7-77.7h581c42.8 0 77.7 34.8 77.7 77.7v648.5c0 42.9-34.9 77.7-77.7 77.7zM174.1 208.5c-16.8 0-30.4 13.6-30.4 30.4v648.5c0 16.8 13.6 30.4 30.4 30.4h581c16.8 0 30.4-13.6 30.4-30.4V238.9c0-16.8-13.6-30.4-30.4-30.4h-581z" fill="#1296db" p-id="6777"></path><path d="M910.4 809.7c-13.1 0-23.6-10.6-23.6-23.6V137.6c0-16.8-13.6-30.4-30.4-30.4h-581c-13.1 0-23.6-10.6-23.6-23.6S262.4 60 275.4 60h581c42.8 0 77.7 34.8 77.7 77.7v648.5c-0.1 12.9-10.7 23.5-23.7 23.5z" fill="#1296db" p-id="6778"></path><path d="M646.3 397.7H282.7c-13.1 0-23.6-10.6-23.6-23.6 0-13.1 10.6-23.6 23.6-23.6h363.6c13.1 0 23.6 10.6 23.6 23.6 0.1 13-10.5 23.6-23.6 23.6zM646.3 586.8H282.7c-13.1 0-23.6-10.6-23.6-23.6s10.6-23.6 23.6-23.6h363.6c13.1 0 23.6 10.6 23.6 23.6s-10.5 23.6-23.6 23.6zM525.1 776H282.7c-13.1 0-23.6-10.6-23.6-23.6s10.6-23.6 23.6-23.6h242.4c13.1 0 23.6 10.6 23.6 23.6S538.2 776 525.1 776z" fill="#1296db" p-id="6779"></path></svg></div>
                </div>
               
            </div>
        </div>
        <!-- 分页 -->
        <div class="fenye">
            <el-pagination 
            @current-change="currentChange"
            layout="prev, pager, next"  :total="searchForm.total"  v-model:page-size="searchForm.size"  />

        </div>   
         

    </div>
</template>
<script setup>
// import dayjs from 'dayjs';
import { ref } from 'vue';
import { AddRole, GetRole, UpdateRole,DelRole} from '../../../api/system.js';
//,AddRole,UpdateRole,DelRole 
import { ElMessage, ElMessageBox } from 'element-plus';

// 角色列表数据 roleList
const roleList = ref([]);
const roleListqx = ref([]);
// 搜索的条件 searchForm
const searchForm = ref({
  size: 3,
  id: '',
  name:'',
  total:16,
  //
    isSys: '',
    ranges: '',
    description: '',
    permission :'',
    is_del: 1
});
const addForm = ref({  
    id: '',
    name:'',
    isSys: '',
    ranges: '',
    description: '',
    permission: '',
   
  
 
});
//获取管理员列表方法
const getRole = ()=>{
    GetRole(searchForm.value).then(res=>{
            roleList.value = res.data.data;
            // console.log(roleList.value);
        })
};
////获取管理员权限方法
const getRoleqx = ()=>{
    GetRole().then(res=>{
            roleListqx.value = res.data.data;
            // console.log(roleListqx.value);
        })
};
getRole();
getRoleqx();
// 分页
const currentChange = (val) => {
  searchForm.value.current = val;
  getRole();
};
// 定义弹框是否信息
const showAdd = ref(false);
// 定义是否显示编辑
const showEdit = ref(false);




//添加角色
const addRole = ()=>{
    AddRole(addForm.value)
  .then(res=>{
    if(res.data.code==0){
      alert("添加成功");
      showAdd.value = false;
      addForm.value = {  
        id: '',
        name:'',
        isSys: '',
        ranges: '',
        description: '',
        permission: '',
      }
    }else{
      alert(res.data.msg||"添加失败")
    }
  })
  .catch(err=>{
    // err.response&&err.response.data&&err.response.data.msg)
    if(err.response?.data?.msg){
      alert(err.response.data.msg);
    }
    console.log(err);
  })
}
// 定义去编辑
const toEdit = item=>{
  // 显示编辑
  showEdit.value = true;
  // 显示弹框
  showAdd.value = true;
  // 定义弹框的内容是编辑的item解构
  addForm.value = {...item};
}

// 定义修改
const updateRole = ()=>{
  // console.log(addForm.value)
  // delete addForm.value.lastTime;
  // 日期需要格式(后端没有写好)
//   addForm.value.lastTime = dayjs(addForm.value.lastTime).format("YYYY-MM-DD HH:mm:ss");
  // 把addForm传入修改
  UpdateRole(addForm.value)
  .then(res=>{
    if(res.data.code==0){
      // 修改完重新获取最新的员工
      getRole();
      // showEdit为false
      showEdit.value = false;
      // 隐藏弹框
      showAdd.value = false;
      // 清空addForm的值
      addForm.value = {  
        id: '',
        name:'',
        isSys: '',
        ranges: '',
        description: '',
        permission: '',
      }
    }else{
      alert("编辑失败")
    }
  })
  .catch(err=>{
    console.log(err);
    alert("失败");
  })

}

// 删除
const toDel = (item)=>{
  // 弹框对话框
  ElMessageBox.confirm('删除不可逆', '确认删除', 
  {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    })
    // 按确定
    .then(()=>{
   
      DelRole(item.id)
        // 返回成功http响应码 200 201 xxx
        .then(res=>{
          console.log(res,"res")
          // 状态码为0 代表删除成功
          if(res.data.code==0){
            // 弹出提示框
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            // 重新获取员工
            getRole();
          }else{
            // 业务逻辑失败
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
        // 返回的错误响应码 400 ,401, 500,505 xxx
        .catch((err)=>{
          console.log(err)
          ElMessage({
              type: 'error',
              message: '错误',
            })
        })
    })
    // 按的取消键
    .catch(()=>{
      
      ElMessage({
              type: 'info',
              message: '删除取消',
            })
    })
  }



















</script>